<template>
	<view class="record-container">
		<!-- 智能输入面板 -->
		<view class="input-panel">
			<view class="amount-display">
				<text class="currency">¥</text>
				<text class="amount">{{ amount || '0.00' }}</text>
			</view>

			<!-- 分类选择器 -->
			<scroll-view class="category-scroll" scroll-x>
				<view class="category-list">
					<view v-for="(item, index) in categories" :key="index"
						:class="['category-item', selectedCategory === item.id ? 'active' : '']"
						@tap="selectCategory(item)">
						<text class="icon">{{ item.icon }}</text>
						<text class="name">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 动态键盘 -->
			<view class="keyboard">
				<view class="keyboard-row" v-for="(row, rowIndex) in keyboardKeys" :key="rowIndex">
					<view v-for="(key, keyIndex) in row" :key="keyIndex" class="key-item"
						:class="{'function-key': key === 'delete' || key === 'done'}" @tap="handleKeyPress(key)">
						<text v-if="key === 'delete'" class="iconfont">←</text>
						<text v-else-if="key === 'done'" class="iconfont">✓</text>
						<text v-else>{{ key }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能按钮组 -->
		<view class="function-bar">
			<!-- 语音输入悬浮球 -->
			<view class="voice-btn" @touchstart="startVoiceInput" @touchend="stopVoiceInput">
				<view class="voice-wave" :class="{ 'recording': isRecording }"></view>
				<text class="icon">🎤</text>
			</view>

			<!-- 拍照记账按钮 -->
			<view class="photo-btn" @tap="openPhotoPanel">
				<text class="icon">📷</text>
			</view>

			<!-- 情景模式切换 -->
			<view class="mode-switch">
				<text v-for="(mode, index) in recordModes" :key="index"
					:class="['mode-item', currentMode === mode.value ? 'active' : '']" @tap="switchMode(mode.value)">
					{{ mode.label }}
				</text>
			</view>
		</view>

		<!-- 历史记录预览 -->
		<view class="recent-records">
			<view class="section-title">最近记录</view>
			<view class="record-list">
				<view class="record-item" v-for="(record, index) in recentRecords" :key="index" @touchstart="touchStart"
					@touchmove="touchMove" @touchend="touchEnd">
					<view class="record-content">
						<view class="left">
							<text class="category">{{ record.category }}</text>
							<text class="remark">{{ record.remark }}</text>
						</view>
						<view class="right">
							<text class="amount"
								:class="record.type">{{ record.type === 'expense' ? '-' : '+' }}{{ record.amount }}</text>
							<text class="time">{{ record.time }}</text>
						</view>
					</view>
					<view class="delete-btn">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	// 数据
	const amount = ref('');
	const selectedCategory = ref(null);
	const isRecording = ref(false);
	const currentMode = ref('normal');

	// 分类数据
	const categories = reactive([{
			id: 1,
			name: '餐饮',
			icon: '🍚'
		},
		{
			id: 2,
			name: '交通',
			icon: '🚌'
		},
		{
			id: 3,
			name: '购物',
			icon: '🛍️'
		},
		{
			id: 4,
			name: '娱乐',
			icon: '🎮'
		},
		{
			id: 5,
			name: '居住',
			icon: '🏠'
		},
		{
			id: 6,
			name: '医疗',
			icon: '💊'
		},
	]);

	// 键盘配置
	const keyboardKeys = [
		['1', '2', '3'],
		['4', '5', '6'],
		['7', '8', '9'],
		['.', '0', 'delete'],
		['done']
	];

	// 记账模式
	const recordModes = [{
			label: '普通记账',
			value: 'normal'
		},
		{
			label: '周期账单',
			value: 'recurring'
		},
		{
			label: 'AA分账',
			value: 'split'
		}
	];

	// 最近记录
	const recentRecords = reactive([{
			category: '餐饮',
			amount: '38.50',
			type: 'expense',
			remark: '午餐',
			time: '12:30',
			location: '公司附近'
		},
		{
			category: '交通',
			amount: '5.00',
			type: 'expense',
			remark: '地铁',
			time: '09:15',
			location: '地铁站'
		},
		{
			category: '工资',
			amount: '15000.00',
			type: 'income',
			remark: '月薪',
			time: '昨天',
			location: ''
		}
	]);

	// 方法
	const selectCategory = (category) => {
		selectedCategory.value = category.id;
	};

	const handleKeyPress = (key) => {
		if (key === 'delete') {
			amount.value = amount.value.slice(0, -1);
		} else if (key === 'done') {
			saveRecord();
		} else {
			if (key === '.' && amount.value.includes('.')) return;
			if (amount.value.includes('.') && amount.value.split('.')[1].length >= 2) return;
			amount.value += key;
		}
	};

	const startVoiceInput = () => {
		isRecording.value = true;
		// 调用语音识别API
	};

	const stopVoiceInput = () => {
		isRecording.value = false;
		// 停止语音识别
	};

	const openPhotoPanel = () => {
		// 打开相机或相册
		uni.chooseImage({
			count: 1,
			success: (res) => {
				// 处理选择的图片
				console.log(res.tempFilePaths);
			}
		});
	};

	const switchMode = (mode) => {
		currentMode.value = mode;
	};

	const saveRecord = () => {
		if (!amount.value || !selectedCategory.value) return;
		// 保存记录逻辑
		uni.showToast({
			title: '记账成功',
			icon: 'success'
		});
		// 重置表单
		amount.value = '';
		selectedCategory.value = null;
	};

	// 滑动删除相关
	let startX = 0;
	const touchStart = (e) => {
		startX = e.touches[0].pageX;
	};

	const touchMove = (e) => {
		let moveX = e.touches[0].pageX - startX;
		// 处理滑动逻辑
	};

	const touchEnd = () => {
		// 处理滑动结束逻辑
	};
</script>

<style lang="scss" scoped>
	.record-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f6f9ff 0%, #edf4ff 50%, #e6f0ff 100%);
		padding-top: 100upx;
		padding-top: 100upx;
	}

	.input-panel {
		background-color: #fff;
		border-radius: 16px;
		margin: 0 20px;
		padding: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.amount-display {
			text-align: center;
			margin-bottom: 20px;

			.currency {
				font-size: 24px;
				color: #333;
			}

			.amount {
				font-size: 40px;
				font-weight: bold;
				color: #333;
				margin-left: 4px;
			}
		}
	}

	.category-scroll {
		margin: 0 -20px;
		padding: 0 20px;
		white-space: nowrap;

		.category-list {
			display: inline-flex;
			padding: 10px 0;

			.category-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20px;
				padding: 10px;
				border-radius: 12px;
				background-color: #f5f5f5;

				&.active {
					background-color: #e6f2ff;
					color: #007aff;
				}

				.icon {
					font-size: 24px;
					margin-bottom: 4px;
				}

				.name {
					font-size: 12px;
				}
			}
		}
	}

	.keyboard {
		margin-top: 20px;

		.keyboard-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;

			.key-item {
				flex: 1;
				height: 50px;
				margin: 0 5px;
				background-color: #f5f5f5;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				font-weight: 500;

				&.function-key {
					background-color: #e6f2ff;
					color: #007aff;
				}
			}
		}
	}

	.function-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20px;

		.voice-btn,
		.photo-btn {
			width: 44px;
			height: 44px;
			border-radius: 22px;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

			.icon {
				font-size: 20px;
			}
		}

		.voice-wave {
			position: absolute;
			width: 44px;
			height: 44px;
			border-radius: 22px;
			background-color: rgba(0, 122, 255, 0.1);
			transform: scale(1);

			&.recording {
				animation: wave 1.5s infinite;
			}
		}

		.mode-switch {
			background-color: #f5f5f5;
			border-radius: 20px;
			padding: 4px;
			display: flex;

			.mode-item {
				padding: 6px 12px;
				font-size: 14px;
				color: #666;
				border-radius: 16px;

				&.active {
					background-color: #fff;
					color: #007aff;
					box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
				}
			}
		}
	}

	.recent-records {
		margin: 20px;

		.section-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.record-list {
			background-color: #fff;
			border-radius: 16px;
			overflow: hidden;

			.record-item {
				position: relative;
				display: flex;
				padding: 15px 20px;
				border-bottom: 1px solid #f5f5f5;

				.record-content {
					flex: 1;
					display: flex;
					justify-content: space-between;

					.left {
						.category {
							font-size: 16px;
							color: #333;
							margin-bottom: 4px;
						}

						.remark {
							font-size: 12px;
							color: #999;
						}
					}

					.right {
						text-align: right;

						.amount {
							font-size: 16px;
							font-weight: 500;
							margin-bottom: 4px;

							&.expense {
								color: #ff3b30;
							}

							&.income {
								color: #34c759;
							}
						}

						.time {
							font-size: 12px;
							color: #999;
						}
					}
				}

				.delete-btn {
					position: absolute;
					right: -80px;
					top: 0;
					width: 80px;
					height: 100%;
					background-color: #ff3b30;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	@keyframes wave {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(2);
			opacity: 0;
		}
	}
</style>